<!--
 * @Author: panda
 * @Date: 2022-05-18 10:07
 * @Description: 视频展示组件
-->
<template>
  <div class="common-layout">
    <el-container class="el-container" style="text-align: center">
      <el-header class="el-header" style="text-align: left">{{
        topic
      }}</el-header>
      <el-container>
        <el-main>
          <el-row
            v-for="(videos, index) in data"
            :key="index"
            :gutter="10"
            style="padding-top: 10px; padding-bottom: 10px"
          >
            <!-- 遍历卡片信息前四个 并传到feedCard组件上进行展示出来-->
            <el-col v-for="item in videos" :key="item.id" :span="6">
              <!-- 将接收到的对象所有属性传过去 -->
              <FeedCard v-bind="item" />
            </el-col>
          </el-row>
        </el-main>
        <el-aside width="400px">
          <RankList :rankList="rankList" />
        </el-aside>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts">
import { reactive, toRefs, watchEffect } from "vue";
import FeedCard from "@/components/feedCard/FeedCard.vue";
import RankList from "@/components/normalModule/RankList.vue";
import { videoApi } from "@/api/video";
import { Video } from "@/api/video";
import { HotTitle } from "@/api/model/video";

interface State {
  pageNum: number;
  pageSize: number;
  data: Array<Array<Video>>;
  rankList: Array<HotTitle>;
}

export default {
  name: "NormalModule",
  components: {
    FeedCard,
    RankList,
  },
  props: {
    topic: String,
    // videos: Array,
  },
  setup(props: any) {
    console.log("首页要展示数据了=============>", props.videos);
    const state = reactive<State>({
      pageNum: 1,
      pageSize: 8,
      data: [],
      rankList: [],
    });
    watchEffect(() => {
      // 请求视频卡片数据
      videoApi
        .getAllVideos({
          pageNum: state.pageNum,
          pageSize: state.pageSize,
          keyword: props.topic,
        })
        .then((res) => {
          //  state.data = res.data.data.rows;
          const { data } = res.data;

          const len = data.rows.length;
          const lineQuanlity = 4; // 一行有四个
          const lineNum =
            len % lineQuanlity === 0
              ? len / lineQuanlity
              : Math.floor(len / lineQuanlity) + 1; // 计算行数
          // const datas = [];
          for (let i = 0; i < lineNum; i++) {
            const temp = data.rows.slice(
              i * lineQuanlity,
              i * lineQuanlity + lineQuanlity
            );
            // console.log(temp)
            state.data.push(temp); // 浅层拷贝
          }
        })
        .catch((error) => {
          console.log(error);
        });
      // 请求排行榜数据
      videoApi
        .getHotVideos({ topic: props.topic })
        .then((res) => {
          state.rankList = res.data.data;
        })
        .catch((error) => {
          console.log(error);
        });
    });

    /*     // 将props数据保存到本地下使用
    const p = props;
    // 计算分类下视频卡片信息的长度和长度的一半，用于循环遍历数据
    const len = p.videos.length;
    const lineQuanlity = 4; // 一行有四个
    const lineNum =
      len % lineQuanlity === 0
        ? len / lineQuanlity
        : Math.floor(len / lineQuanlity) + 1; // 计算行数
    const datas = [];
    for (let i = 0; i < lineNum; i++) {
      const temp = p.videos.slice(
        i * lineQuanlity,
        i * lineQuanlity + lineQuanlity
      );
      // console.log(temp)
      datas.push(temp); // 浅层拷贝
    } */
    // console.log("========", datas.length);

    return {
      ...toRefs(props),
      // datas,
      ...toRefs(state),
    };
  },
};
</script>

<style scoped>
.common-layout {
  /* min-height: 1500px; */
  margin-left: 80px;
}

/* .el-container {
  min-height: 1500px;
} */

.el-main {
  padding-top: 0px;
}

.el-header {
  line-height: 60px;
  font-size: 24px;
}

.el-aside {
  font-size: 14px;
  text-align: left;
  padding: 40px;
}

.el-aside br {
  margin-top: 10px;
}
</style>
